<template>
  <van-cell-group class="login-container">
    <van-field
      v-model="username"
      label="用户名"
      placeholder="用户名"
      required
      clearable
    />
    <van-field
      v-model="password"
      type="password"
      label="密码"
      placeholder="密码"
      required
      clearable
    />
    <div class="button-container">
      <van-button round block type="primary" @click="handleSubmit">
        登录
      </van-button>
    </div>
  </van-cell-group>
</template>

<script>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { useRouter } from 'vue-router';
import mockLogin from '@/api/mockLogin';

export default {
  setup() {
    const router = useRouter();
    const username = ref('00');
    const password = ref('123456');
    const authStore = useAuthStore();

    const handleSubmit = async () => {
      try {
        const response = await mockLogin(username.value, password.value);
        if (response.success) {
          authStore.login(response.user);
          router.push('/');
        } else {
          alert('登录失败，请检查用户名和密码。');
        }
      } catch (error) {
        alert('登录过程中发生错误：' + error.message);
      }
    };

    return {
      username,
      password,
      handleSubmit,
    };
  },
};
</script>

<style scoped>
.login-container {
  max-width: 50vw;
  padding: 2.5vh;
  background-color: #f9f9f9;
  border-radius: 0.5vw;
  box-shadow: 0 0 1.25vh rgba(0, 0, 0, 0.1);
  margin: 12.5vh auto;
  margin-top: 2.5vh;
}

.button-container {
  margin-top: 2.5vh;
}
</style>